<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    .top{
        height: 70px;
        background-color: #18BEBE;
        text-align: center;
    }
    .topimg{
        margin-top: 10px;
    }
    .nav{
        height: 45px;
        background-color: #EBEBEB;
        position: relative;
    }
    .nav-co,.wrap,.content{
        height: 45px;
        line-height: 45px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 1000px;
    }
    .content{
        position: relative;
        margin-top: 15px;
        background-color:#EBEBEB;
    }
    .wrap{
        text-align: left;
    }
    .nav-co a,.wrap-a a,.container-a a,.content-1 a{
        text-decoration: none;
        color: #515151;
    }
    .box{height: 1185px;}
    .nav-co a{
        margin-left: 30px;
    }
    .nav-co a:hover{
        color: #FFA700;
    }
    .simg1,.simg2{
            background-repeat:no-repeat;
            position: absolute;
            top: 50%;
            margin-top: -9.5px;
            display: inline-block;
            width:19px;height:19px;
        }
        .content-1-1,.content-1-3,.content-1-2,.content-2-1,.content-3-1{
            background-repeat:no-repeat;
            position: absolute;
            display: inline-block;
            width:19px;height:19px;
        }
        .content-1-1{
            margin-left: 4px;
            margin-top: 20.5px;
        }
        .content-1-2{
            margin-left: -27px;
            margin-top: 20.5px;
        }
        .content-1-3{
            margin-left: 7px;
            margin-top: 20.5px;
        }
        .content-2-1{
            margin-left: -52px;
            margin-top: 18.5px;
        }
        .content-2-2{
            background-color: #FFFFFF;
            margin-left: -33px;
            margin-top: 16.5px;
        }
        .content-3-1{
            margin-left: -136px;
            margin-top: 14.5px;
        }
    .simg1{
        background:url("img/location.png")
    }
    .simg2{
        background: url("img/adm.png")
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    .crumb{
        margin: 0 5px;
    }
    .text,.left{
        display: inline-block;
        margin-left: 10px;
    }
    .container{
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        height:170px;
        width:1000px;
        background-color:#EBEBEB; 
    }
    .bd{
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        height:1000px;
        width:1000px;
    }
    .a-2,.a-3,.a-4,.a-2-1{
        display: inline-block;
        text-align: center;
        margin:12px 5px 0px; 
        font-size: 15px;    
    }
    .a-2,.a-2-1{
        height: 25px;
        width: 40px;
    }
    .a-3{
        height: 25px;
        width: 50px;
    }
    .a-4{
        height: 25px;
        width:70px;
    }
    .container-a .a-2-1{
        color: #18BEBE;
}
.a-2,.a-3,.a-4{
     border: 2px solid #EBEBEB;
}
.a-2:hover{
    border: 2px solid #FFA700;
    background-color: #FFFFFF;
}
.a-3:hover{
    border: 2px solid #FFA700;
    background-color: #FFFFFF;
}
.a-4:hover{
    border: 2px solid #FFA700;
    background-color: #FFFFFF;
}
.content-1,.content-2,.content-3{
    display: inline-block;
    height: 45px;
    width: 250px;
}
.content-1{
 float: left;
 text-align: left;
 margin-left: 10px;
}

.content-3{
    float: right;
}
.content-1-1{
    background-image: url("img/downicon.png");
}
.content-1-2,.content-1-3{
    background-image: url("img/upicon.png");
}
.content-2-1{
    background-image: url("img/search.png");
}
.content-2 .content-2-2{
    border: none;
}
.content-3-1{
    background-image: url("img/wenhao.png");
}
.content-1-4{
    margin: 0 33px;
}
.bd-1,.bd-2{ 
     display: inline-block; 
     overflow: hidden;
    width: 240px;
    height: 345px;
    background-color:#EBEBEB; 
}
.bd-1{
    margin-right: 8px;
}
.bd-1-1{
     margin:15px;
    width: 230px;
    height: 335px;
}
.bd-1-1 p{
    font-size: 15px;
    margin-top: 5px;
}
.bd-1-1 b,.bd-1-1 span{
    display: inline-block;
    color: #18BEBE;
    margin-top: 8px;
}
.bd-1-1 b{
    font-size: 18px;
}
.bd-1-1 span{
    font-size: 14px;
}
.bd-1-1:hover{
    color: #FFA700;
}
.fo-1{
     display: inline-block;
    margin-top: 10px;
}
.fo{
    margin-top: 20px;
   height: 45px;
    width: 1000px;
    text-align: left;

} 
.fo-1-1{
      margin-left: 10px;
      margin-right: 20px;
      width: 117px;
      height: 36px;
      border: none;
      background-color: #EBEBEB;
    } 
    .fo-1 a{
        display: inline-block;
        margin: 0 15px;
        color: #000;
    }
    .fo-1 a:hover{
        color: #FFA700;
    }
    .fo-1-2{
        text-align: center;
        width: 25px;
      height: 25px;
      border:1px solid #515151;
    }
    .fo-1-3{
        border: none;
        width: 65px;
      height: 36px;
      background-color:#FFA700;
      margin-left: 20px;
    }
.foo-2{
    border: 1px solid #555;
    width: 85px;
    height: 85px;
}
.foo{
    height: 90px;
    width: 1000px;
    text-align:left;
    margin-left: auto;
    margin-right: auto;
}
.foo-1{
    margin-top: 25px;
}
.foo-2,.foo-3{
    display: inline-block;
    margin-left: 10px;
}
.tex{
    width: 240px;
    height: 24px;
}
.di-3-1{
    color: #18BEBE;
    font-size: 20px;
    margin-bottom: 10px;
}
.footer{
    margin-top: 20px;
    background-color: #515151;
   
    }
.footer-1{ 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 300px;
    width: 1000px;
}
.footer-1-1{
    vertical-align:middle;
    display: inline-block;
  width: 425px;
  height: 200px;
  text-align: left;
}
.footer-2{
    height: 200px;
    vertical-align:middle;
    display: inline-block;
    width: 245px;
    text-align: left;
}
.footer-3{
    height: 200px;
    vertical-align:middle;
    display: inline-block;
    width: 300px;
}
.footer-1-2{
    margin-top: 25px;
    margin-bottom: 15px;
}
.footer-2 a{
    display: inline-block;
    text-decoration: none;
    color: #FFFFFF;
    margin-top: 33px;
    margin-right: 56px;
}
.footer-3 a{
    display: inline-block;
    text-decoration: none;
    color: #FFFFFF;
    margin-top: 30px;
    margin-left: 10px;
}
.footer-1-3 p,.footer-4 span{
    color: #FFFFFF;
}
.footer-4{
    display: inline-block;
       margin-top: 20px;
       height: 40px;
       width: 1000px;
   }
  .footer-4-1{
      float: left;
      margin-left: 10px;
  }
  .footer-4-2{
      float: right;
      margin-right: 10px;
  }
  .bd-1,.fo-1-1,.fo-1-3,.content-2-2{
      cursor: pointer;
  }
  </style>
</head>
<body>

    <div class="top">
        <img src="img/logo.png" alt="" class="topimg">
    </div>
    <div class="nav">
        <div class="nav-co">
            <div class="left">
            <span class="simg1"></span> <a href="#">深圳<span>&lt;切换&gt;</span></a> 
        </div>
            <a href="#">首页</a>
            <a href="#">资讯</a>
            <a href="#">测评</a>
            <a href="#">商城</a>
            <div class="right">
            <span class="simg2"></span> <a href="#">个人中心</a>
        </div>
        </div>
        
    </div>

    <div class="box">
        
    <div class="wrap">
        <div class="wrap-a">
            <a href="#" class="text">首页</a><span class="crumb">></span><a href="#">预防装修污染</a><span class="crumb">></span><a href="#">材料库</a>
        </div>
    </div>
  
    <div class="container">
        <div class="container-a">
            <a href="#" class="a-2-1">类别</a> <a href="#" class="a-2">全部</a> <a href="#" class="a-2">地板</a>  <a href="#" class="a-2">涂料</a>  <a href="#" class="a-2">壁纸</a>  <a href="#" class="a-2">瓷砖</a>  <a href="#" class="a-3">粘胶剂</a>  <a href="#" class="a-2">油漆</a>  <a href="#" class="a-2">家具</a>  <a href="#" class="a-2">板材</a>  <a href="#" class="a-2">饰品</a>  <span></span><br>
            <a href="#" class="a-2-1">类型</a>  <a href="#" class="a-2">全部</a> <br>
            <a href="#" class="a-2-1">材质</a>  <a href="#" class="a-2">全部</a>  <a href="#" class="a-2">实木</a>  <a href="#" class="a-2">复合</a>  <a href="#" class="a-2">强化</a>  <a href="#" class="a-2">其他</a> <br>
            <a href="#" class="a-2-1">品牌</a>  <a href="#" class="a-2">全部</a>  <a href="#" class="a-2">圣象</a>  <a href="#" class="a-3">大自然</a>  <a href="#" class="a-3">生活家</a>  <a href="#" class="a-4">北美枫情</a>  <a href="#" class="a-2">德尔</a>  <a href="#" class="a-2">博典</a>  <a href="#" class="a-2">船王</a> 
        </div>
    </div>

     <div class="content">
         <div class="content-1"><a href="#">发布时间</a><span class="content-1-1"></span><a href="#" class="content-1-4">价格</a><span class="content-1-2"></span><a href="#">环保节能</a><span class="content-1-3"></span></div>
             <div class="content-2"><input type="tex" class="tex"><span class="content-2-1"></span><button class="content-2-2">搜索</button></div>
                 <div class="content-3"><span class="content-3-1"></span><p>了解家居医生建材环保评级标准</p></div>
     </div>

     <div class="bd">
         <!-- 第1张图片 -->
         <div class="bd-1">
             <div class="bd-1-1">
                 <img src="img/data_image.png" alt="">
                 <p>德尔　　都市系列3001</p>
                 <p>木地板 - 复合地板</p>
                 <p>单价： 128元 /m&sup2; </p>
                 <b>环保评级：B </b><span>　(可以使用)</span>

             </div>
         </div>

          <!-- 第2张图片 -->
          <div class="bd-1">
                <div class="bd-1-1">
                    <img src="img/data_image.png" alt="">
                    <p>德尔　　都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价： 128元 /m&sup2; </p>
                    <b>环保评级：B </b><span>　(可以使用)</span>
   
                </div>
            </div>
             <!-- 第3张图片 -->
         <div class="bd-1">
                <div class="bd-1-1">
                    <img src="img/data_image.png" alt="">
                    <p>德尔　　都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价： 128元 /m&sup2; </p>
                    <b>环保评级：B </b><span>　(可以使用)</span>
   
                </div>
            </div>
             <!-- 第4张图片 -->
         <div class="bd-2">
                <div class="bd-1-1">
                    <img src="img/data_image.png" alt="">
                    <p>德尔　　都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价： 128元 /m&sup2; </p>
                    <b>环保评级：B </b><span>　(可以使用)</span>
   
                </div>
            </div>
             <!-- 第5张图片 -->
         <div class="bd-1">
                <div class="bd-1-1">
                    <img src="img/data_image.png" alt="">
                    <p>德尔　　都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价： 128元 /m&sup2; </p>
                    <b>环保评级：B </b><span>　(可以使用)</span>
   
                </div>
            </div>
             <!-- 第6张图片 -->
         <div class="bd-1">
                <div class="bd-1-1">
                    <img src="img/data_image.png" alt="">
                    <p>德尔　　都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价： 128元 /m&sup2; </p>
                    <b>环保评级：B </b><span>　(可以使用)</span>
   
                </div>
            </div>
             <!-- 第7张图片 -->
         <div class="bd-1">
                <div class="bd-1-1">
                    <img src="img/data_image.png" alt="">
                    <p>德尔　　都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价： 128元 /m&sup2; </p>
                    <b>环保评级：B </b><span>　(可以使用)</span>
   
                </div>
            </div>
             <!-- 第8张图片 -->
         <div class="bd-2">
                <div class="bd-1-1">
                    <img src="img/data_image.png" alt="">
                    <p>德尔　　都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价： 128元 /m&sup2; </p>
                    <b>环保评级：B </b><span>　(可以使用)</span>
                </div>
            </div>
    
             <div class="fo">
           <div class="fo-1">
               <button class="fo-1-1">上一页</button>
               <a href="#">1</a>
               <a href="#">2</a>
               <a href="#">3</a>
               <a href="#">4</a>
               <a href="#">5</a>
               <button class="fo-1-1">下一页</button>
               <span>共有10页，　去第　</span>
               <input type="text" class="fo-1-2">
               <span>　页</span>
               <button class="fo-1-3">确定</button>
           </div>
       </div>
       <div class="foo">
           <div class="foo-1">
               <div class="foo-2">
                   <img src="img/small_weixin.png" alt=""> 
                 </div>
                   <div class="foo-3">
                        <p class="di-3-1">建材检测 需求反馈</p>
                        <p>亲爱的用户，我们正在不断的完善和更新建材库，</p>
                        <p>若没有找到您想要的材料信息，请将您想测得建材告诉我们。</p>
               </div>
           </div>
       </div>

    </div>

    </div>

    <div class="footer">
        
        <div class="footer-1">
            <div class="footer-1-1">
                <div class="footer-1-2">
                        <img src="img/footerLogo.png" alt="">
                     </div>
                        <div class="footer-1-3">
                                <p>为室内环境健康把好每一关</p><br>
                                <p>家居医生致力于中国人的健康问题，通过专业的技术研究</p>
                                <p>和测评，倾力协助大众打造绿色、环保的人居生活环境。</p>   
                            </div>
                            </div>
            <div class="footer-2"> 
                <a href="#">关于我们</a>
                <a href="#">版权所有</a><br>
                <a href="#">联系我们</a>
                <a href="#">用户隐私</a><br>
                <a href="#">加入我们</a>
                <a href="#">免费申请</a>
            </div>
            <div class="footer-3">
                <span><img src="img/weixin2.png" alt=""></span><a href="#">官方微信</a><br>
                <span><img src="img/tianmao.png" alt=""></span><a href="#">天猫旗舰店</a><br>
                <span><img src="img/shop.png" alt=""></span><a href="#">有赞商城</a>
            </div>

            <fieldset>
                <legend>  </legend>
            </fieldset>

            <div class="footer-4">
                    <span class="footer-4-1">深圳建筑科学研究院股份有限公司 家居医生上网</span>
                    <span class="footer-4-2">粤IPC备08011321号 @Copyright All Right Reserved</span>
                </div>
       </div> 
    </div>
</body>
</html>